<template>
  <div class="splb">
    <!-- 商品列表 -->
    <!-- 输入框 -->
    <el-row>
      <el-col :span="18" style="display: flex; margin: 20px 0">
        <el-input
          placeholder="请输入商品ID"
          v-model="form.goodsId"
          size="mini"
          clearable
        ></el-input>
        <el-input
          placeholder="请输入商品编号"
          v-model="form.goodsSn"
          size="mini"
          clearable
        ></el-input>
        <el-input
          placeholder="请输入商品名称"
          v-model="form.name"
          size="mini"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="width: 80px; height: 26px"
          @click="getlist"
          >查找</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-edit"
          style="width: 80px; height: 26px"
          @click="tianjia"
          >添加</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          style="width: 80px; height: 26px"
          @click="downLoad"
          >导出</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          style="height: 26px"
          @click="plsc"
          >批量删除</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <el-table
          border
          @current-change="handleCurrentChange1"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="right" inline class="demo-table-expand">
                <el-form-item label="商品编号">
                  <span>{{ props.row.goodsSn }}</span>
                </el-form-item>
                <el-form-item label="宣传画廊">
                  <!-- <span v-for="(item,index) in props.row.gallery" :v-key="index" v-html="item"></span> -->
                </el-form-item>
                <el-form-item label="商品介绍">
                  <span>{{ props.row.brief }}</span>
                </el-form-item>
                <el-form-item label="商品单位">
                  <span>{{ props.row.unit }}</span>
                </el-form-item>
                <el-form-item label="关键字">
                  <span>{{ props.row.keywords }}</span>
                </el-form-item>
                <el-form-item label="类目ID">
                  <span>{{ props.row.categoryId }}</span>
                </el-form-item>
                <el-form-item label="品牌商ID">
                  <span>{{ props.row.brandId }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="商品 ID" prop="id" width="99">
          </el-table-column>
          <el-table-column label="名称" prop="name" width="116">
          </el-table-column>
          <el-table-column
            label="图片"
            prop="picUrl"
            width="93"
            style="margin: 0 auto"
          >
            <template slot-scope="props">
              <img :src="props.row.picUrl" alt="" width="40px" height="40px" />
            </template>
          </el-table-column>
          <el-table-column label="分享图" prop="shareUrl" width="93">
          </el-table-column>
          <el-table-column label="详细" width="93">
            <template slot-scope="props">
              <el-button type="primary" @click="chakan(props.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="市场售价" prop="counterPrice" width="93">
          </el-table-column>
          <el-table-column label="当前价格" prop="retailPrice" width="93">
          </el-table-column>
          <el-table-column label="是否新品" prop="isNew" width="93">
            <template slot-scope="props">
              <el-tag v-if="!props.row.isNew">非新品</el-tag>
              <el-tag v-else type="success">新品</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否热品" prop="isHot" width="93">
            <template slot-scope="props">
              <el-tag v-if="!props.row.isHot">非热品</el-tag>
              <el-tag v-else type="success">热品</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否在线" prop="isOnSale" width="93">
            <template slot-scope="props">
              <el-tag v-if="!props.row.isOnSale">非在售</el-tag>
              <el-tag v-else type="success">在售</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="props">
              <el-button type="primary" @click="bianji(props.row)"
                >编辑</el-button
              >
              <el-button type="danger" @click="shanchu1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 查看 -->
    <el-dialog
      title="商品详情"
      center
      :visible.sync="dialogVisible"
      width="53%"
      style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)"
      :before-close="handleClose"
    >
      <span v-html="detail"></span>
    </el-dialog>
    <!-- 分页器 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          background
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { splbbl, shanchu } from "@/api/spgl/splb.js";
import * as XLSX from "xlsx"; // 批量导出
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
      ],
      form: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc",
        goodsId: "",
        goodsSn: "",
        name: "",
      },
      total: 1,
      currentPage4: 4,
      // 勾选框
      multipleSelection: [],
      currentRow: null,
      // 查看
      detail: "",
    };
  },
  methods: {
    //添加
    tianjia() {
      this.$router.push({ path: "/goods/create" });
    },

    // 导出
    downLoad() {
      this.$confirm("此操作将导出excel表格, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(this.tableData,'tableData');

          // 定义表头
          const headers = [
            "商品ID",
            "商品编号",
            "名称",
            "专柜价格",
            "当前价格",
            "是否新品",
            "是否热卖",
            "是否在售",
            "首页主图",
            "宣传图片列表",
          ]; // 将表格数据转换为工作表数据
          const worksheetData = [
            headers, // 第一行为表头
            ...this.tableData.map((item) => {
              return [
                item.id || "",
                item.goodsSn || "",
                item.name || "",
                item.counterPrice || 0,
                item.retailPrice || 0,
                item.isNew,
                item.isHot,
                item.isOnSale,
                "",
                item.gallery || "",
              ];
            }),
          ]; // 创建工作表

          const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

          XLSX.writeFile(workbook, "商品列表导出.xlsx"); // 提示导出成功

          this.$message({
            type: "success",
            message: "导出成功！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    // 编辑
    bianji(row) {
      this.$router.push({
        path: "/goods/edit",
        query: {
          id: row.id,
        },
      });
    },
    // 查看
    chakan(row) {
      // console.log(row);

      (this.dialogVisible = true), (this.detail = row.detail);
    },
    // 关闭模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除
    shanchu1() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(11111111111111111111111);
          shanchu(this.currentRow)
            .then(() => {
              this.getlist();
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 勾选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange1(val) {
      this.currentRow = val;
      console.log(this.currentRow);
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form.limit = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.form.page = val;
      this.getlist();
    },
    // 遍历
    getlist() {
      splbbl(this.form).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
    // 批量删除
    plsc() {
      for (let i = 0; i < this.multipleSelection.lenght; i++) {
        this.shanchu1();
      }
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
.splb {
  padding: 20px;
}
// 标签
.el-tag {
  height: auto;
  line-height: normal;
}
// 表格内容
.el-table .cell {
  font-size: 12px !important;
}
// 输入框
.el-input {
  margin-right: 10px;
  width: 200px;
  height: 30px;
  font-size: 12px;
}
.el-input__inner {
  height: 30px;
}
// 按钮
.el-button {
  margin-right: 10px;
  font-size: 12px;
  padding: 7px 15px;
}
// 表格样式
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  // .el-form-item__label{
  //   width: 90px;
  // }
  // span{
  //   margin-left:  30px;
  // }
}
// 布局样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>